<template>
  <div class="user">

    <div class="userLeft">

      <div class="userLeftCon">

        <ul>
          <li
          v-for="(userLeftConIt,userLeftConIdx) in userLeftConArr"
          :class="{'u_Le_Li_ac':uLeftC_Idx==userLeftConIdx}"
          @click="setVal(userLeftConIdx)">
            <span>
              {{userLeftConIt}}
            </span>
          </li>
        </ul>
      </div>
    </div>

    <div class="userRight"
    :style="{'width':(winWid-145)+'px','height':(winHei-65)+'px'}">

      <div class="userRightCon">

        <div v-show="uLeftC_Idx==0" class="u_Info">
          <ul>

            <li>
              <dl class="u_Info_Le">
                <dt>
                  用户名
                </dt>
                <dd>
                  {{u_info.username}}
                </dd>
              </dl>

              <ul class="u_Info_Ri">
                <li @click="op_itemPopFn('修改密码',true)">
                  <span>
                    密码修改
                  </span>
                </li>
              </ul>
            </li>


            <li>
              <dl class="u_Info_Le">
                <dt>
                  代币余额
                </dt>
                <dd>
                  {{u_info.amount}}
                </dd>
              </dl>

              <ul class="u_Info_Ri">
                <li @click="op_itemPopFn('充值确认',true,0)">
                  <span>
                    充值
                  </span>
                </li>
                <li @click="op_itemPopFn('提现',true,0,true)">
                  <span>
                    提现
                  </span>
                </li>
                <li @click="op_itemPopFn('代币转让',true,0,true)">
                  <span>
                    代币转让
                  </span>
                </li>
              </ul>
            </li>


            <li>
              <dl class="u_Info_Le">
                <dt>
                  钱包地址
                </dt>
                <dd>
                  {{u_info.address}}
                </dd>
              </dl>

              <ul class="u_Info_Ri">
                <li @click="op_itemPopFn('设置钱包地址',true,0,true)">
                  <span>
                    设置地址
                  </span>
                </li>
              </ul>
            </li>


            <li>
              <dl class="u_Info_Le">
                <dt>
                  交易密码
                </dt>
                <dd v-if="u_info.trad_password==1">
                  ******
                </dd>
                <dd v-else>
                  未设置
                </dd>
              </dl>

              <ul class="u_Info_Ri">
                <li @click="op_itemPopFn('设置交易密码',true,0,true)">
                  <span>
                    设置交易密码
                  </span>
                </li>
              </ul>
            </li>

            <li>
              <dl class="u_Info_Le">
                <dt>
                  到期时间
                </dt>
                <dd>
                  {{u_info.endtime}}
                </dd>
              </dl>

              <ul class="u_Info_Ri">

              </ul>
            </li>

          </ul>
        </div>
        <div v-show="uLeftC_Idx==1" class="daibi_Info">

          <table cellpadding="0" cellspacing="0" border="0">

            <tr>
              <th>
                代币变化
              </th>
              <th>
                变更之前
              </th>
              <th>
                变更之后
              </th>
              <th>
                类型
              </th>
            </tr>

            <tr
            v-for="(taderList_It,taderList_Idx) in taderList"
            :key="'taderList_It_'+taderList_Idx">
              <td>
                {{taderList_It.name}}
              </td>
              <td>
                {{taderList_It.changeq}}
              </td>
              <td>
                {{taderList_It.changeh}}
              </td>
              <td>
                {{taderList_It.type}}
              </td>
            </tr>
          </table>

          <FenYe v-if="taderList.length!==0" ref="myFenye" :last_page="taderList_last_page"></FenYe>

         <div v-else class="noData">
           <div class="noDataCon">
             <img src="@/assets/img/user/noData.png" alt="">
             <span>
               No Data
             </span>
           </div>
         </div>

        </div>
        <div v-show="uLeftC_Idx==2" class="chargeList">
          <div class="beizhu">
            <span>
              充值成功请务必点击我已充值
            </span>
          </div>
          <table cellpadding="0" cellspacing="0" border="0">

            <tr>
              <th>
                创建时间
              </th>
              <th>
                充值时间
              </th>
              <th>
                充值数量
              </th>
              <th>
                充值状态
              </th>
              <th>
                原因
              </th>
              <th>
                汇率
              </th>
              <th>
                实到代币
              </th>
              <th>
                操作
              </th>
            </tr>

            <tr
            v-for="(chargeList_It,chargeList_Idx) in chargeList"
            :key="'chargeList_It_'+chargeList_Idx">
              <td>
                {{chargeList_It.catetimes}}
              </td>
              <td>
                {{chargeList_It.uptimes}}
              </td>
              <td>
                {{chargeList_It.amount}} USDT
              </td>
              <td>

                <div class="charge_status">
                  {{chargeList_It.status}}
                </div>

              </td>
              <td>
                --
              </td>
              <td>
                {{chargeList_It.rate}}
              </td>
              <td>
                {{chargeList_It.dzamount}}
              </td>
              <td>
                <div class="chargeBtnBox">
                  <div @click="ver_charge()" class="ver_chargeBtn">
                    验证充值
                  </div>
                  <div @click="del_c_order(chargeList_It.id)" class="chargeDelete">
                    删除
                  </div>

                </div>
              </td>
            </tr>
          </table>
          <FenYe v-if="chargeList.length!==0" ref="myFenye" :last_page="chargeList_last_page"></FenYe>
          <div v-else class="noData">
            <div class="noDataCon">
              <img src="@/assets/img/user/noData.png" alt="">
              <span>
                No Data
              </span>
            </div>
          </div>
        </div>
        <div v-show="uLeftC_Idx==3" class="drawList">
            <table cellpadding="0" cellspacing="0" border="0">

              <tr>
                <th>
                  创建时间
                </th>
                <th>
                  提现时间
                </th>
                <th>
                  提现数量(代币)
                </th>
                <th>
                  实际提现(USDT)
                </th>
                <th>
                  提现状态
                </th>
              </tr>

              <tr
              v-for="(daibi_Info_It,daibi_Info_Idx) in withdrawList"
              :key="'daibi_Info_It_'+daibi_Info_Idx">
                <td>
                    {{daibi_Info_It.catetimes}}
                </td>
                <td>
                  {{daibi_Info_It.uptimes}}
                </td>
                <td>
                  {{daibi_Info_It.amount}}
                </td>
                <td>
                  {{daibi_Info_It.dzamount}}
                </td>
                <td>
                  {{daibi_Info_It.status}}
                </td>
              </tr>
            </table>
            <FenYe v-if="withdrawList.length!==0" ref="myFenye" :last_page="withdrawList_last_page"></FenYe>
            <div v-else class="noData">
              <div class="noDataCon">
                <img src="@/assets/img/user/noData.png" alt="">
                <span>
                  No Data
                </span>
              </div>
            </div>
        </div>

      </div>

    </div>

    <ItemPop></ItemPop>

    <div v-show="is_show_logistics" class="logistics_info">
        <div @click.stop="" class="logistics_infoMain">
          <div class="top">

            <h4 class="wuliu_title">
              温馨提示
            </h4>

            <div class="wuliu">
              {{log_str}}
            </div>

          </div>
          <div class="bot">
              <dl>
                <dt @click="del_charge_record(del_c_num)">
                  确定
                </dt>
                <dd @click="setVis('is_show_logistics',false)">
                  取消
                </dd>
              </dl>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import FenYe from "@/components/vuePagination.vue";
import ItemPop from "@/components/itemPop.vue";
export default {
  name: 'User',
  data(){
    return{
      userLeftConArr:[
        "基本信息",
        "代币流水",
        "充值记录",
        "提现记录"
      ],
      uLeftC_Idx:0,
      u_info:{
        address: "",
        amount: "",
        username: "",
        trad_password:null
      },
      // 交易明细
      //分页总页数
      taderList_last_page:null,
      taderList:[],
      //充值记录
      chargeList_last_page:null,
      chargeList:[],
      //提现记录
      withdrawList_last_page:null,
      withdrawList:[],
      is_show_logistics:false,
      del_c_num:null,
      log_str:''
    }
  },
  components:{
    FenYe,
    ItemPop
  },
  created() {
    let that=this;
    this.$bus.$on("u_infoEvent",()=>{
      console.log("u_infoEvent");
      setTimeout(()=>{
        that.get_u_info();
      }, 1000);
    }); 
  },
  activated() {
    let that=this;
    console.log("路由：",this.$route.query.tzLeft);
    console.log("页面路径",window.location.href);
    if(window.location.href.indexOf("tzLeft")!==-1){
      console.log("有tzLeft");
      that.setVal(this.$route.query.tzLeft);
    }else{
      console.log("无tzLeft");
    }


    that.get_u_info();
    that.getList(1);
  },
  methods:{
    del_c_order(val){
      let that=this;
      that.del_c_num=val;
      that.log_str='是否要删除词条充值记录?';
      that.setVis('is_show_logistics',true);
    },
    setVis(x,y){
      let that=this;
      that[x]=y;
    },
    del_charge_record(val){
      let that=this;
      if(that.log_str=='是否要删除词条充值记录?'){
        this.$request.get(
          "/api/balance/dell_recharge",
          {
            recid:val
          },
          {

          }
        ).then((res)=>{
         	console.log("删除充值请求成功：",res);
          if(res.data.code==1){
            that.getList(1);  
            that.setVis('is_show_logistics',false);
            this.$bus.$emit("toastEvent",res.data.msg,res.data.code);
          } 
         })
         .catch((err)=>{
         	console.log("删除充值请求失败：",err);
         });
      }else{
        that.log_str='';
        that.setVis('is_show_logistics',false);
      }

    },
    getList(val){
      let that=this;
      if(that.uLeftC_Idx==1){
        this.$request.get(
          "/api/balance/loglist",
          {
            pageSize:10,
            pageNo:val
          },
          {

          }
        ).then((res)=>{
         	console.log("交易明细请求成功：",res.data.data);
          if(res.data.code==1){
            let allcount=res.data.data.count;
            if(allcount%10==0){
              that.taderList_last_page=allcount/10;
            }else{
              that.taderList_last_page=Math.floor(allcount/10)+1;
            }
            that.taderList=res.data.data.list;
          }

         })
         .catch((err)=>{
         	console.log("交易明细请求失败：",err);
         });
      }else if(that.uLeftC_Idx==2){
        this.$request.get(
          "/api/balance/recharge_log",
          {
            pageSize:10,
            pageNo:val
          },
          {

          }
        ).then((res)=>{
         	console.log("充值记录请求成功：",res.data.data);
          if(res.data.code==1){
            let allcount=res.data.data.count;
            if(allcount%10==0){
              that.chargeList_last_page=allcount/10;
            }else{
              that.chargeList_last_page=Math.floor(allcount/10)+1;
            }
            that.chargeList_last_page=res.data.data.count;
            that.chargeList=res.data.data.list;
          }

         })
         .catch((err)=>{
         	console.log("充值记录请求失败：",err);
         });
      }else if(that.uLeftC_Idx==3){
        this.$request.get(
          "/api/balance/withdraw_log",
          {
            pageSize:10,
            pageNo:val
          },
          {

          }
        ).then((res)=>{
         	console.log("提现记录请求成功：",res.data.data);
          if(res.data.code==1){
            let allcount=res.data.data.count;
            if(allcount%10==0){
              that.withdrawList_last_page=allcount/10;
            }else{
              that.withdrawList_last_page=Math.floor(allcount/10)+1;
            }
            that.withdrawList=res.data.data.list;
          }

         })
         .catch((err)=>{
         	console.log("提现记录请求失败：",err);
         });
      }

    },
    ver_charge(){
      let that=this;
      this.$request.get(
        "/api/balance/check_recharge",
        {

        },
        {

        }
      ).then((res)=>{
       	console.log("验证充值请求成功：",res);
        if(res.data.code==1){
          that.log_str=res.data.msg;
          that.setVis('is_show_logistics',true);
        }

       })
       .catch((err)=>{
       	console.log("验证充值请求失败：",err);
       });
    },
    get_u_info(){
      let that=this;
      this.$request.get(
        "/api/user/info",
        {

        },
        {

        }
      ).then((res)=>{
       	console.log("用户信息请求成功：",res);
        if(res.data.code==1){
          that.u_info=res.data.data;
          this.$store.commit('set_u_info',that.u_info);
        }

       })
       .catch((err)=>{
       	console.log("用户信息请求失败：",err);
       });
    },
    setVal(val){
      let that=this;
      that.uLeftC_Idx=val;
      console.log("that.uLeftC_Idx:"+that.uLeftC_Idx);
      that.getList(1);
    },
    op_itemPopFn(x,y,z,a){
      let that=this;
      console.log("u_info:",that.u_info.trad_password);
      if(x=="设置交易密码"){
        if(that.u_info.trad_password==0){
          this.$bus.$emit("itemPopEvent",x,y,1,false);
        }else{
          this.$bus.$emit("itemPopEvent",x,y,0,true);
        }
      }else{
        if(that.u_info.trad_password==0){
          this.$bus.$emit("toastEvent","请先设置交易密码!",0);
        }else{
          this.$bus.$emit("itemPopEvent",x,y,z,a);
        }
      }

    }
  }
}
</script>

<style lang="less" scoped>
  @import "../../../assets/css/user/user.less";
  .logistics_info{
    position:fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .logistics_infoMain{
      background-color: #fff;
      border-radius: 3px;
      padding: 0 15px;
      width: 400px;
      box-shadow: 0 0 16px #ddd;
      .top{
        padding: 20px 0;
        .wuliu{
          padding-top: 10px;
          border-top: 1px solid #f0f0f0;
          color: #666;
          font-size: 14px;
          line-height: 22px;
          margin-top: 10px;
          ul{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            overflow: hidden;
            li{
              border: 1px solid #d9d9d9;
              border-radius: 3px;
              background-color: #fafafa;
              margin-top: 8px;
              span{
                display: block;
                color: #575757;
                font-size: 12px;
                line-height: 22px;
                padding: 0 5px;
              }
            }
          }
        }
      }
      .bot{
        padding:10px 0;
          border-top: 1px solid #f0f0f0;
          dl{
            display: flex;
            flex-direction: row-reverse;
            dt,dd{
              height: 30px;
              line-height: 30px;
              padding: 0 14px;
              cursor: pointer;
              border-radius: 3px;
              font-size: 14px;
              border: 1px solid #f47920;
            }
            dt{
              background-color: #f47920;
              color: #fff;
              margin-left: 10px;
            }
            dd{
              color: #595959;
              border-color: #d9d9d9;
              transition: .3s;
            }
            dd:hover{
              color: #f47920;
              border-color: #f47920;
            }
          }
      }
    }
  }
</style>
